<template>
  <div class="menu-wrapper">
    <div class="menu-container">
      <div class="menu-title">个人中心</div>
      <ul class="menu-list">
        <li 
          v-for="(item, index) in menuItems" 
          :key="index"
          class="menu-item"
          :class="{ active: activeIndex === index }"
          @click="selectItem(index)"
        >
          {{ item.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserChange",
  data() {
    return {
      menuItems: [
        { text: '个人资料', path: '/userCenter/userModifyInfo' },
        { text: '修改偏好', path: '/userCenter/userInterest' },
        { text: '修改密码', path: '/userCenter/userModifyPassword' },
        { text: '修改绑定', path: '/userCenter/userModifyPhone' }
      ],
      activeIndex: 0
    }
  },
  methods: {
    selectItem(index) {
      this.activeIndex = index;
      this.$router.push({
        path: this.menuItems[index].path
      });
    }
  }
}
</script>

<style scoped>
/* 保持原有样式不变 */
.menu-wrapper {
  font-family: 'Arial', sans-serif;
  background-color: white;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-container {
  width: 180px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.menu-title {
  padding: 15px 20px;
  font-size: 15px;
  background-color: #ff4d4f;
  font-weight: bold;
  color: white;
  text-align: center;
  margin: 0;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  padding: 20px 20px;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.menu-item:hover {
  background-color: #fff2f0;
}

.menu-item.active {
  color: #ff4d4f;
  background-color: #fff2f0;
  font-weight: bold;
}
</style>